import {Graph} from "@antv/x6";
import React, {FC, useEffect, useRef} from "react";
import {Addon, Shape} from "@antv/x6";
import styles from "../../views/workshop-layout/index.module.less";

interface StencilProps{
    graph:Graph
}
const Stencil:FC<StencilProps> =({graph})=>{

    const stencilRef = useRef<any>()

    const handleInit = () => {
        // //左侧组件库
        // const stencil = new Addon.Stencil({
        //     title: '流程图',
        //     //目标画布
        //     target: graph,
        //     //模板画布宽高
        //     stencilGraphWidth: 200,
        //     stencilGraphHeight: 180,
        //     //是否显示全局折叠/展开按钮
        //     collapsable: true,
        //     groups: [
        //         {
        //             title: '基础流程图',
        //             name: 'group1',
        //         },
        //         {
        //             title: '系统设计图',
        //             name: 'group2',
        //             graphHeight: 250,
        //             layoutOptions: {
        //                 rowHeight: 70,
        //             },
        //         },
        //     ],
        //     //布局选项。
        //     layoutOptions: {
        //         columns: 2,
        //         columnWidth: 80,
        //         rowHeight: 70,
        //     },
        // })
        //
        //
        // //组件
        // const {Rect, Circle} = Shape
        // const r = new Rect({
        //     width: 70,
        //     height: 40,
        //     attrs: {
        //         rect: {fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6},
        //         text: {text: 'rect', fill: 'white'},
        //     },
        // })
        //
        // const c = new Circle({
        //     width: 60,
        //     height: 60,
        //     attrs: {
        //         circle: {fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67'},
        //         text: {text: 'ellipse', fill: 'white'},
        //     },
        // })
        //
        // const c2 = new Circle({
        //     width: 60,
        //     height: 60,
        //     attrs: {
        //         circle: {fill: '#4B4A67', 'stroke-width': 6, stroke: '#FE854F'},
        //         text: {text: 'ellipse', fill: 'white'},
        //     },
        // })
        //
        // const r2 = new Rect({
        //     width: 70,
        //     height: 40,
        //     attrs: {
        //         rect: {fill: '#4B4A67', stroke: '#31D0C6', strokeWidth: 6},
        //         text: {text: 'rect', fill: 'white'},
        //     },
        // })
        //
        // const r3 = new Rect({
        //     width: 70,
        //     height: 40,
        //     attrs: {
        //         rect: {fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6},
        //         text: {text: 'rect', fill: 'white'},
        //     },
        // })
        //
        // const c3 = new Circle({
        //     width: 60,
        //     height: 60,
        //     attrs: {
        //         circle: {fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67'},
        //         text: {text: 'ellipse', fill: 'white'},
        //     },
        // })
        //
        // // #region 初始化图形
        // const ports = {
        //     groups: {
        //         top: {
        //             position: "top",
        //             attrs: {
        //                 circle: {
        //                     r: 4,
        //                     magnet: true,
        //                     stroke: "#5F95FF",
        //                     strokeWidth: 1,
        //                     fill: "#fff",
        //                     style: {
        //                         visibility: "hidden"
        //                     }
        //                 }
        //             }
        //         },
        //         right: {
        //             position: "right",
        //             attrs: {
        //                 circle: {
        //                     r: 4,
        //                     magnet: true,
        //                     stroke: "#5F95FF",
        //                     strokeWidth: 1,
        //                     fill: "#fff",
        //                     style: {
        //                         visibility: "hidden"
        //                     }
        //                 }
        //             }
        //         },
        //         bottom: {
        //             position: "bottom",
        //             attrs: {
        //                 circle: {
        //                     r: 4,
        //                     magnet: true,
        //                     stroke: "#5F95FF",
        //                     strokeWidth: 1,
        //                     fill: "#fff",
        //                     style: {
        //                         visibility: "hidden"
        //                     }
        //                 }
        //             }
        //         },
        //         left: {
        //             position: "left",
        //             attrs: {
        //                 circle: {
        //                     r: 4,
        //                     magnet: true,
        //                     stroke: "#5F95FF",
        //                     strokeWidth: 1,
        //                     fill: "#fff",
        //                     style: {
        //                         visibility: "hidden"
        //                     }
        //                 }
        //             }
        //         }
        //     },
        //     items: [
        //         {
        //             group: "top"
        //         },
        //         {
        //             group: "right"
        //         },
        //         {
        //             group: "bottom"
        //         },
        //         {
        //             group: "left"
        //         }
        //     ]
        // };
        //
        // Graph.registerNode(
        //     "custom-image",
        //     {
        //         inherit: "rect",
        //         width: 52,
        //         height: 52,
        //         markup: [
        //             {
        //                 tagName: "rect",
        //                 selector: "body"
        //             },
        //             {
        //                 tagName: "image"
        //             },
        //             {
        //                 tagName: "text",
        //                 selector: "label"
        //             }
        //         ],
        //         attrs: {
        //             body: {
        //                 stroke: "#5F95FF",
        //                 fill: "#5F95FF"
        //             },
        //             image: {
        //                 width: 26,
        //                 height: 26,
        //                 refX: 13,
        //                 refY: 16
        //             },
        //             label: {
        //                 refX: 3,
        //                 refY: 2,
        //                 textAnchor: "left",
        //                 textVerticalAnchor: "top",
        //                 fontSize: 12,
        //                 fill: "#fff"
        //             }
        //         },
        //         ports: { ...ports }
        //     },
        //     true
        // );
        //
        // const imageShapes = [
        //     {
        //         label: "Client",
        //         image:
        //             "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg"
        //     },
        //     {
        //         label: "Http",
        //         image:
        //             "https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg"
        //     },
        //     {
        //         label: "Api",
        //         image:
        //             "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg"
        //     },
        //     {
        //         label: "Sql",
        //         image:
        //             "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg"
        //     },
        //     {
        //         label: "Clound",
        //         image:
        //             "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg"
        //     },
        //     {
        //         label: "Mq",
        //         image:
        //             "https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg"
        //     }
        // ];
        // const imageNodes = imageShapes.map((item) =>
        //     graph.createNode({
        //         shape: "custom-image",
        //         label: item.label,
        //         attrs: {
        //             image: {
        //                 "xlink:href": item.image
        //             }
        //         }
        //     })
        // );
        // stencil.load(imageNodes, "group2");
        // stencil.load([r, c, c2, r2.clone()], 'group1')
        // stencilRef.current.appendChild(stencil.container)
    }

    useEffect(()=>{
        handleInit()
    },[])

    return(
        <div ref={stencilRef} className={styles.contentstencil}/>
)
}
export default Stencil
